<template>
  <div>
    <a-card title="添加文章">
      <a-form-model :model="form"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                    :rules="rules"
                    ref="ruleForm">
        <a-form-model-item label="文章标题"
                           prop="title">
          <a-input v-model="form.title" />
        </a-form-model-item>
        <a-form-model-item label="文章描述">
          <a-input v-model="form.desc" />
        </a-form-model-item>
        <a-form-model-item label="文章作者">
          <a-input v-model="form.author"
                   type="textarea" />
        </a-form-model-item>
        <a-form-model-item label="封面图片">
          <a-upload name="file"
                    :multiple="true"
                    action="http://rap2api.taobao.org/app/mock/279365/api/v1/upload"
                    :headers="headers"
                    @change="handleChange">
            <a-button>
              <a-icon type="upload" />上传图片
            </a-button>
          </a-upload>
        </a-form-model-item>
        <a-form-model-item label="文章内容">
          <a-input v-model="form.content"
                   type="textarea" />
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary"
                    @click="onClcik"> 提交 </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </div>
</template>

<script>
import { getArt } from '../../api'
export default {
  name: 'artedit',
  data () {
    return {
      form: {
        title: '',
        desc: '',
        author: '',
        thumb: '',
        content: ''
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      // 设置表单规则
      rules: {
        title: [{ required: true, message: '请输入标题' }],
        desc: [{ required: true, message: '请输入描述' }]
      },
      headers: {
        authorization: 'authorization-text'
      }
    }
  },
  created () {
    this.getArt()
  },
  methods: {
    getArt () {
      const artId = this.$route.params.id
      getArt(artId).then(res => {
        if (res.data.code === 200) {
          this.form = res.data.data
        }
      })
    },
    onClcik () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          // 有验证 通过执行代码段
          // 发送ajax请求
          getArt({ ...this.form }).then(res => {
            // console.log(res)
            if (res.data.code === 200) {
              this.$message.success('修改完成！', 3, () => {
                // 提交之后页面会清空
                this.$router.replace('admin/artlist')
              })
            }
          })
          // 发送Ajax 结束
        } else {
          // 无验证 通过执行代码段
          console.log('error submit!!')
          return false
        }
      })
    },
    // 上传文件控件中的 @change 方法
    handleChange (info) {
      if (info.file.status !== 'uploading') {
      }
      if (info.file.status === 'done') {
        this.form.thumb = info.file.name
        this.$message.success(`${info.file.name} 上传成功`)
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} 上传失败`)
      }
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
